<template>
  <div class="app-container">
    <el-steps :active="2" style="margin-top: 30px">
      <el-step title="添加课程信息" icon="el-icon-edit"></el-step>
      <el-step title="添加课程大纲信息" icon="el-icon-upload"></el-step>
      <el-step title="发布课程" icon="el-icon-picture"></el-step>
    </el-steps>

    <p>
      <el-button style="padding: 3px 0" type="text" @click="toAdd()">添加章节</el-button>
    </p>
    <el-card v-if="chapterList!=null" class="box-card" v-for="(cha) in chapterList" :key="cha.id">
      <div slot="header" class="clearfix">
        <span>{{ cha.title }}</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="delCha(cha.id)">删除</el-button>
        <el-button style="float: right; padding: 3px 0" type="text" @click="toEditChapter(cha.id)">编辑</el-button>
        <el-button style="float: right; padding: 3px 0" type="text" @click="addVideo(cha.id)">添加小节</el-button>

      </div>

      <el-card v-if="cha.videos!=null" class="box-card" v-for="(video) in cha.videos" :key="video.id">
        <div slot="header" class="clearfix">
          <span>{{ video.title }}</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="delVid(video.id)" >删除</el-button>
          <el-button style="float: right; padding: 3px 0" type="text" @click="editToVideo(video.id)">编辑</el-button>
          <el-button style="float: right; padding: 3px 0" type="text" @click="seeVideo(video.videoSourceId)">预览</el-button>
        </div>
      </el-card>
    </el-card>

    <el-button type="primary" @click="prev" style="margin-top: 20px" plain>上一步</el-button>
    <el-button type="primary" @click="next" style="margin-top: 20px">下一步</el-button>

    <!--    chapter-->
    <el-dialog
      title="新增/修改章节"
      :visible.sync="chapterDialog"
      width="35%">
      <el-form ref="form" :model="chapterForm" label-width="120px">
        <el-form-item label="章节标题">
          <el-input v-model="chapterForm.title"/>
        </el-form-item>
        <el-form-item label=章节排序>
          <el-input-number size="small" v-model="chapterForm.sort" :min="0" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>
    <!--    video-->
    <el-dialog
      title="新增/修改小节"
      :visible.sync="videoDialog"
      @close="handleClose"
      width="35%">
      <el-form ref="videoForm" :model="videoForm" label-width="120px">
        <el-form-item label="小节标题">
          <el-input v-model="videoForm.title" placeholder="章节标题"/>
        </el-form-item>
        <el-form-item label=章节排序>
          <el-input-number v-model="videoForm.sort" controls-position="right" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="是否收费">
          <el-radio v-model="videoForm.isFree" :label="1">免费</el-radio>
          <el-radio v-model="videoForm.isFree" :label="0">默认</el-radio>
        </el-form-item>
        <el-form-item label="上传视频">
          <el-upload
            ref="upVideo"
            :headers="tokenUrl"
            class="upload-demo"
            :action="BASE_API+'/video/upload'"
            :limit="1"
            :on-success="handlerSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetVideo">重置</el-button>
          <el-button type="primary" @click="submitVideo">提交</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

    <!--阿里云播放器-->
    <el-dialog
      class="video"
      @close="colseVideo()"
      :visible.sync="playShow"
    >

      <ali-player
        v-if="playAuth"
        :vid="vid"
        :playauth="playAuth"
        qualitySort="asc"
        format="m3u8"
        mediaType="video"
        :encryptType=1
        ref="player"
        :autoplay=false
        :isLive=false
        :rePlay=false
        :preload=true
        controlBarVisibility="hover"
        :useH5Prism=true
      >
      </ali-player>

    </el-dialog>
  </div>
</template>

<script>
import {delChapter, saveUpdate, showAll, showChapter} from "@/api/chapter";
import {delVideo, findVideo, saveEditVideo,getPlayAuth} from "@/api/video";
import {getToken} from "@/utils/auth";
import VueAliplayer from '@/components/AliPlayer'
export default {
  components: { "ali-player": VueAliplayer },
  name: "chapter",
  data() {
    return {
      playShow: false,
      vid: '', //视频vid
      playAuth: '', //鉴权地址
      BASE_API: process.env.BASE_API,
      tokenUrl:{
        'Authorization':'Bearer '+getToken()
      },
      cId: '',
      chapterList: [],
      chapterDialog: false,
      chapterForm: {
        id: '',
        courseId: '',
        title: '',
        sort: 0
      },
      videoDialog: false,
      videoForm: {
        id: '',
        courseId: '',
        chapterId: '',
        title: '',
        videoSourceId: '',
        sort: 0,
        isFree: 0,

      }
    }
  },
  created() {
    this.cId = this.$route.query.cId
    if (this.cId != null) {
      this.all()
    }
  },
  methods: {
    handleClose() {

      // 关闭弹出层时重置表单状态
      this.$refs.videoForm.resetFields();

      //重置表单数据
      this.videoForm={}
      this.$refs.upVideo.clearFiles(); // 清空文件
    },
    colseVideo(){

      // //重新子组件初始化

      this.$refs.player.initAliplayer()

    },


    seeVideo(vid) {

      this.vid=''
      this.playAuth=''

      //根据vid去查凭证
      getPlayAuth(vid).then(res => {

        this.vid = vid
        this.playAuth = res.data
        this.playShow = true

      })


    },
    delCha(chapterid){
      this.$confirm('此操作将永久删除该章节, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delChapter(chapterid).then(res=>{
          if (res.code==20000){
            this.$message.success("删除成功")
            this.all();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    delVid(vid){
      this.$confirm('此操作将永久删除该小节信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delVideo(vid).then(res=>{
          if (res.code==20000){
            this.$message.success("删除成功");
            this.all();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    editToVideo(vid){
      findVideo(vid).then(res=>{
        this.videoForm=res.data
        this.videoDialog=true
      })
    },
    handlerSuccess(res, file) {
      this.videoForm.videoSourceId = res.data

    },
    resetVideo() {
      this.videoForm = {
        id: '',
        courseId: '',
        chapterId: '',
        title: '',
        videoSourceId: '',
        sort: 0,
        isFree: 0,
      }

    },
    submitVideo() {
      if (this.videoForm.id == '') {
        if (this.videoForm.videoSourceId == '') {
          this.$message.error("课程视频不得为空")
          return false;
        }
      }
      saveEditVideo(this.videoForm).then(res => {

        this.$message.success("操作成功")
        this.all();
        this.videoDialog = false;

      })
    },
    addVideo(chapterid) {
      this.resetVideo();
      this.videoForm.courseId = this.cId;
      this.videoForm.chapterId = chapterid;
      this.videoDialog = true;

    },
    toEditChapter(chapterid) {
      showChapter(chapterid).then(res => {
        if (res.code == 20000) {
          this.chapterForm = res.data
          this.chapterDialog = true;
        }
      })
    },
    onSubmit() {
      this.chapterForm.courseId = this.cId
      saveUpdate(this.chapterForm).then(res => {
        if (res.code == 20000) {
          this.$message.success("操作成功");
          this.all();
          this.chapterDialog = false;
        }
      })
    },
    resetForm() {
      this.chapterForm = {
        id: '',
        courseId: '',
        title: '',
        sort: 0
      }
    },
    toAdd() {
      this.chapterDialog = true;
    },
    all() {
      showAll(this.cId).then(res => {
        if (res.code == 20000) {
          this.chapterList = res.data
        }
      })
    },
    prev() {
      this.$router.push({path: "/course/save", query: {cId: this.cId}})
    },
    next() {
      this.$router.push({path: "/course/publish", query: {cId: this.cId}})
    }
  }
}
</script>


<style>
.video .el-dialog__header {
  padding: 0;
}

.video .el-dialog__body {
  padding: 0;
}

</style>
